<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.姓名案例_计算属性实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			计算属性完整的总结：
					1.关于get函数
								get函数何时调用？
										(1).读取fullName时。
										(2).当计算fullName所【依赖的数据】发生改变时。
								get函数中的this是vm。
					
					2.关于set函数（用的很少）
								set函数何时调用？仅当计算属性被修改时。
								什么是修改计算属性？
										这叫做修改计算属性：this.fullName = 'sun-qi'
										这叫读取：this.fullName
								set函数中的this是vm。

					3.备注：
							(1).计算属性最终也会出现在vm上，在模板中可直接使用，不要加()，不要加.get()！！
							(2).如果计算属性后期会被修改，那必须写set函数（setter）去响应修改。
							(3).如果计算属性不考虑修改，那就直接使用简写形式，写成一个函数。

		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			姓：<input type="text" v-model="firstName"> <br><br>
			名：<input type="text" v-model="lastName"> <br><br>
			全名：<span>{{fullName}}</span> <br><br>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			let vm = new Vue({
				el:'#demo',
				data:{
					firstName:'li',
					lastName:'si',
				},
				computed:{
					fullName:{
						//get函数何时调用？ —— ①有人读取fullName时。②计算fullName时所依赖的数据发生变化时。
						//get函数，中的this是谁？—— vm
						get(){
							console.log('fullName函数被调用了！')
							return this.firstName.slice(0,1).toUpperCase() + this.firstName.slice(1) + '-' + this.lastName
						},
						//set函数何时调用？—— 有人修改fullName时。
						//set函数，中的this是谁？—— vm。
						set(value){
							console.log('有人修改了fullName这个计算属性，值为：',value)
							let arr = value.split('-')
							this.firstName = arr[0]
							this.lastName = arr[1]
						}
					}
				}
			})
			console.log(vm)
		</script>
	</body>
</html>